package com.quyunshuo.module.home.fragment.compose

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import com.quyunshuo.module.home.R
import com.quyunshuo.module.home.view.MhtTextView
import com.quyunshuo.module.home.view.SemiCircleProgressBar

@Composable
fun HomePage(onclick: () -> Unit = {}) {
    var isPressed by remember { mutableStateOf(false) }
    //rememberInfiniteTransition 创建一个无限动画过渡对象 ，直到被明确停止或组件被移除 remember确保动画状态在重组时保持
    val infiniteTransition = rememberInfiniteTransition()
    val floatAnimation by infiniteTransition.animateFloat(
        initialValue = -10f,  // 初始值：向上偏移10像素
        targetValue = 10f,  // 目标值：向下偏移10像素
        animationSpec = infiniteRepeatable(
            //easing = LinearEasing: 使用线性缓动函数，使动画匀速进行
            //1000: 动画持续时间（毫秒）
            animation = tween(1000, easing = LinearEasing), // 基础动画
            repeatMode = RepeatMode.Reverse // 重复模式
        )
    )

    //使用 AndroidView组件来嵌入传统 Android XML 布局，并实现状态驱动的交互效果
    AndroidView(
        factory = { ctx ->
            // 加载 XML 布局
            val inflater = LayoutInflater.from(ctx)
            val view = inflater.inflate(R.layout.home_button, null) as ViewGroup

            // 获取 TextView
            val textView = view.getChildAt(0) as MhtTextView

            // 设置点击事件
            textView.setOnClickListener {
                isPressed = !isPressed
                onclick.invoke()
            }

            view
        },
        modifier = Modifier
            .fillMaxWidth()
            //应用浮动动画:当需要对一个组件应用变换（如缩放、旋转、平移、透明度等）但​​不希望触发重组​​时使用
            .graphicsLayer {
                translationY = if (isPressed) 0f else floatAnimation
            },
        update = { view ->//update的调用 响应 Compose 状态变化
            // 根据 Compose 状态更新视图 根据 isPressed 更新视图 ...
            val textView = view.getChildAt(0) as MhtTextView

            if (isPressed) {
                textView.setBackgroundResource(R.drawable.home_bg_radius_20)
            } else {
                textView.setBackgroundResource(R.drawable.home_bg_radius_1000)
            }
        }
    )
}

@Composable
fun ProgressBarExample() {
    var progress by remember { mutableStateOf(50f) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        SemiCircleProgressBar(
            progress = progress,
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp),
            strokeWidth = 20.dp,
            startColor = Color(0xFFFF5722),
            middleColor = Color(0xFFFFC107),
            endColor = Color(0xFF4CAF50),
            dotRadius = 15.dp,
            dotColor = Color.White
        )

        Spacer(modifier = Modifier.height(32.dp))

        // 进度控制滑块
        Text(text = "进度: ${progress.toInt()}%")
        Slider(
            value = progress,
            onValueChange = { progress = it },
            valueRange = 0f..100f
        )

        Spacer(modifier = Modifier.height(16.dp))

        // 示例按钮
        Button(onClick = { progress = 75f }) {
            Text("设置进度为75%")
        }
    }
}

@Preview
@Composable
fun HomePagePreview() {
    Column {

        HomePage()
        ProgressBarExample()
    }

}